@tailwind base;
@tailwind components;
@tailwind utilities;

/* 自定义样式 */
@layer base {
  html {
    font-family: 'Inter', system-ui, sans-serif;
  }

  body {
    @apply bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100;
  }
}

@layer components {
  /* 按钮组件样式 */
  .btn {
    @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2;
  }

  .btn-primary {
    @apply bg-primary-light-500 hover:bg-primary-light-600 active:bg-primary-light-700 focus:ring-primary-light-500 dark:bg-primary-dark-500 dark:hover:bg-primary-dark-600 dark:active:bg-primary-dark-700 dark:focus:ring-primary-dark-500;
  }

  .btn-success {
    @apply bg-success-light-500 hover:bg-success-light-600 active:bg-success-light-700 focus:ring-success-light-500 dark:bg-success-dark-500 dark:hover:bg-success-dark-600 dark:active:bg-success-dark-700 dark:focus:ring-success-dark-500;
  }

  .btn-warning {
    @apply bg-warning-light-500 hover:bg-warning-light-600 active:bg-warning-light-700 focus:ring-warning-light-500 dark:bg-warning-dark-500 dark:hover:bg-warning-dark-600 dark:active:bg-warning-dark-700 dark:focus:ring-warning-dark-500;
  }

  .btn-danger {
    @apply bg-error-light-500 hover:bg-error-light-600 active:bg-error-light-700 focus:ring-error-light-500 dark:bg-error-dark-500 dark:hover:bg-error-dark-600 dark:active:bg-error-dark-700 dark:focus:ring-error-dark-500;
  }

  .btn-sm {
    @apply px-3 py-1.5 text-xs;
  }

  .btn-lg {
    @apply px-6 py-3 text-base;
  }

  /* 卡片组件样式 */
  .card {
    @apply bg-white rounded-lg shadow-md border border-gray-200 dark:bg-gray-800 dark:border-gray-700;
  }

  .card-header {
    @apply px-6 py-4 border-b border-gray-200 dark:border-gray-700;
  }

  .card-body {
    @apply px-6 py-4;
  }

  .card-footer {
    @apply px-6 py-4 border-t border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-750;
  }

  /* 表单组件样式 */
  .form-input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-light-500 focus:border-primary-light-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:placeholder-gray-400 dark:focus:ring-primary-dark-500 dark:focus:border-primary-dark-500;
  }

  .form-textarea {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-light-500 focus:border-primary-light-500 resize-y dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:placeholder-gray-400 dark:focus:ring-primary-dark-500 dark:focus:border-primary-dark-500;
  }

  .form-select {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-light-500 focus:border-primary-light-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-primary-dark-500 dark:focus:border-primary-dark-500;
  }

  .form-label {
    @apply block text-sm font-medium text-gray-700 mb-1 dark:text-gray-300;
  }

  .form-error {
    @apply text-sm text-error-light-500 mt-1 dark:text-error-dark-500;
  }

  /* 容器样式 */
  .container-fluid {
    @apply w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }
}

@layer utilities {
  /* 自定义工具类 */
  .text-balance {
    text-wrap: balance;
  }

  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  .flex-center {
    @apply flex items-center justify-center;
  }
}
